<template>
	<view class="content">
		<!-- 头部banner -->
		<view class="header">
			<image src="../../static/discover_img/discover.png" mode=""></image>
		</view>
		<!-- S级特权区 -->
		<view class="privilege">
			<view class="title color_icon_txt font34">
				<text>S级特权</text>
			</view>
			<view class="pictures font26">
				<uni-grid :options="list" :show-border="false" :column-num="4" /></uni-grid>
				<!-- <view class="pic_box font28" v-for="(item, index) in list" :key="index">
					<image :src="item.img" mode=""></image>
					<text>{{item.txt}}</text>
				</view> -->
			</view>
		</view>

		<!-- 引入公共模板 新手指南 -->
		<Guide></Guide>

		<!-- 新手问答 -->
		<view class="question">
			<view class="title">
				<text class="font34">新手问答</text>
				<view class="more color_title font26">
					<text>不懂AD广告共享？立即提问</text>
				</view>
			</view>
			<view class="box color666">
				<text class="li font26">新手分类</text>
				<text class="li font26">新手分类</text>
				<text class="li font26">新手分类</text>
				<text class="li font26">新手分类</text>
			</view>
			<view class="questionlist m_t30" v-for="(item, index) in quesList" :key="index">
				<view class="list_head font30 blod">
					{{item.head}}
				</view>
				<view class="list_con font28 m_t30 color666">
					{{item.content}}
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	import Guide from "../../common/guide.vue"
	import uniGrid from '@/components/uni-grid/uni-grid.vue'
	
	export default {
		data() {
			return {
				list: [{
					"image": "../../static/discover_img/privilege_1.png",
					"text": "特权展示"
				}, {
					"image": "../../static/discover_img/privilege_1.png",
					"text": "特权展示"
				}, {
					"image": "../../static/discover_img/privilege_1.png",
					"text": "特权展示"
				}, {
					"image": "../../static/discover_img/privilege_1.png",
					"text": "特权展示"
				}, {
					"image": "../../static/discover_img/privilege_1.png",
					"text": "特权展示"
				}, {
					"image": "../../static/discover_img/privilege_1.png",
					"text": "特权展示"
				}, {
					"image": "../../static/discover_img/privilege_1.png",
					"text": "特权展示"
				}, {
					"image": "../../static/discover_img/privilege_1.png",
					"text": "特权展示"
				}],
				quesList: [{
					"head": "AD是个什么平台？刚下载软件有很多地方不是很明白，谁来帮我讲解下？",
					"content": "刚进来的小伙伴可以去新手指引那里了解下，它可以帮助你快速了解AD平台，并且有很多惊喜等着你呢呦~"
				},{
					"head": "AD是个什么平台？刚下载软件有很多地方不是很明白，谁来帮我讲解下？",
					"content": "刚进来的小伙伴可以去新手指引那里了解下，它可以帮助你快速了解AD平台，并且有很多惊喜等着你呢呦~"
				}, {
					"head": "AD是个什么平台？刚下载软件有很多地方不是很明白，谁来帮我讲解下？",
					"content": "刚进来的小伙伴可以去新手指引那里了解下，它可以帮助你快速了解AD平台，并且有很多惊喜等着你呢呦~"
				}, {
					"head": "AD是个什么平台？刚下载软件有很多地方不是很明白，谁来帮我讲解下？",
					"content": "刚进来的小伙伴可以去新手指引那里了解下，它可以帮助你快速了解AD平台，并且有很多惊喜等着你呢呦~"
				}]
			}
		},
		components: {
			Guide, //新手指南
			uniGrid //九宫格组件
		},
		onLoad() {

		},
		methods: {

		},
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		overflow: hidden;

		// 头部banner
		.header {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0 0 20upx 0;

			image {
				width: 700upx;
				height: 280upx;
			}
		}

		// S级特权区
		.privilege {
			border-bottom: 20upx solid #F0F0F8;

			.title {
				padding: 10upx 0 0 30upx;
			}

			.pictures {
				width: 94%;
				margin: 0 auto;
				.example {
					padding: 0 30upx 30upx
				}
				
// 				.pic_box {
// 					width: 25%;
// 					display: flex;
// 					align-items: center;
// 					justify-content: center;
// 					flex-direction: column;
// 					padding: 15upx 0;
// 
// 					image {
// 						width: 80upx;
// 						height: 80upx;
// 						margin: 5upx 0;
// 					}
// 				}
			}
		}

		// 新手问答
		.question {
			border-bottom: 20upx solid #F0F0F8;

			.title {
				display: flex;
				align-items: center;
				padding: 20upx 30upx;

				.more {
					margin-left: 30upx;
				}
			}

			.box {
				width: 92%;
				margin: 10upx auto 60upx auto;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.li {
					text-align: center;
					line-height: 28upx;
					border-radius: 50upx;
					padding: 10upx 20upx;
					border: 1upx solid lightgray;
				}
			}

			.questionlist {
				padding: 0 30upx 20upx 30upx;
				border-bottom: 1upx solid #F0F0F8;
			}
		}
	}
</style>
